﻿<mockups:WindowsPhoneChrome xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:mockups="clr-namespace:Microsoft.Expression.Prototyping.WindowsPhone.Mockups;assembly=WindowsPhone.Mockups" xmlns:pc="http://schemas.microsoft.com/prototyping/2010/controls" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:pi="http://schemas.microsoft.com/prototyping/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:wp="http://schemas.microsoft.com/prototyping/2010/controls/windowsphone" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
    x:Class="MS_SocialPhotoSketchScreens.PhotoDetailPage"
    mc:Ignorable="d"
	xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    x:Name="PhoneChrome">
	<mockups:WindowsPhoneChrome.Resources>
		<ResourceDictionary>
			<ResourceDictionary.MergedDictionaries>
				<ResourceDictionary Source="ProjectDataSources.xaml"/>
			</ResourceDictionary.MergedDictionaries>
		</ResourceDictionary>
	</mockups:WindowsPhoneChrome.Resources>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="OrientationChanged">
            <i:Interaction.Behaviors>
                <ei:ConditionBehavior>
                    <ei:ConditionalExpression>
                        <ei:ComparisonCondition LeftOperand="{Binding PageOrientation, ElementName=PhoneChrome}"
                                                RightOperand="Landscape" />
                    </ei:ConditionalExpression>
                </ei:ConditionBehavior>
            </i:Interaction.Behaviors>
            <mockups:GoToStateAction StateName="Landscape"
                                     TargetObject="{Binding ElementName=LayoutRoot}"
                                     TargetName="LayoutRoot" />
        </i:EventTrigger>
        <i:EventTrigger EventName="OrientationChanged">
            <i:Interaction.Behaviors>
                <ei:ConditionBehavior>
                    <ei:ConditionalExpression>
                        <ei:ComparisonCondition LeftOperand="{Binding PageOrientation, ElementName=PhoneChrome}"
                                                RightOperand="Portrait" />
                    </ei:ConditionalExpression>
                </ei:ConditionBehavior>
            </i:Interaction.Behaviors>
            <mockups:GoToStateAction StateName="Portrait"
                                     TargetObject="{Binding ElementName=LayoutRoot}"
                                     TargetName="LayoutRoot" />
        </i:EventTrigger>
    </i:Interaction.Triggers>

    <mockups:WindowsPhoneChrome.BackButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateBackAction />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/back.png" />
        </Button>
    </mockups:WindowsPhoneChrome.BackButton>

    <mockups:WindowsPhoneChrome.HomeButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.Home" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/home.png" />
        </Button>
    </mockups:WindowsPhoneChrome.HomeButton>

    <mockups:WindowsPhoneChrome.SearchButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateToScreenAction TargetScreen="MS_SocialPhotoSketchScreens.Search" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/search.png" />
        </Button>
    </mockups:WindowsPhoneChrome.SearchButton>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource ImageDataSource}}">
    	<Grid.RowDefinitions>
    		<RowDefinition Height="*"/>
    		<RowDefinition Height="auto"/>
    	</Grid.RowDefinitions>
        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager />
        </VisualStateManager.CustomVisualStateManager>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates"
                              ei:ExtendedVisualStateManager.UseFluidLayout="True">
                <VisualState x:Name="Portrait" />
                <VisualState x:Name="Landscape">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(WindowsPhoneChrome.PageOrientation)"
                                                       Storyboard.TargetName="PhoneChrome">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <mockups:PageOrientation>Landscape</mockups:PageOrientation>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    	<wp:Pivot Title="Social Photo" Margin="8,0,-8,0">
    		<wp:PivotItem Header="Photo1" Margin="0">
    			<Grid>
    				<Grid.RowDefinitions>
    					<RowDefinition Height="*"/>
						<RowDefinition Height="30"/>
						<RowDefinition Height="0.3*"/>
					</Grid.RowDefinitions>
    				<Image Source="{Binding Image}"/>
    				<StackPanel Grid.Row="1" Orientation="Horizontal"><TextBlock  Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="Descriptions" Margin="0,0,150,0" FontSize="24" FontWeight="Bold"/>
						<ed:RegularPolygon Fill="{StaticResource BaseBackground-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" UseLayoutRounding="False" Width="46" d:LayoutOverrides="VerticalMargin" HorizontalAlignment="Right"/>
						<ed:RegularPolygon Fill="{StaticResource BaseBackground-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" UseLayoutRounding="False" Width="46" HorizontalAlignment="Right" d:LayoutOverrides="VerticalMargin"/>
						<ed:RegularPolygon Fill="{StaticResource BaseBackground-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" UseLayoutRounding="False" Width="46" HorizontalAlignment="Right" d:LayoutOverrides="VerticalMargin"/>
						<ed:RegularPolygon Fill="{StaticResource BaseBackground-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" UseLayoutRounding="False" Width="46" HorizontalAlignment="Right" d:LayoutOverrides="VerticalMargin"/>
						
					</StackPanel>
    				<TextBlock Text="{Binding Description}" Grid.Row="2" Style="{StaticResource BasicTextBlock-Sketch}"/>
				</Grid>
    		</wp:PivotItem>
    		<wp:PivotItem Header="Photo2">
    			<Grid Height="604" Width="480">
    				<Grid.RowDefinitions>
    					<RowDefinition Height="*"/>
    					<RowDefinition Height="30"/>
    					<RowDefinition Height="0.3*"/>
    				</Grid.RowDefinitions>
    				<Image Source="{Binding Image}"/>
    				<StackPanel Grid.Row="1" Orientation="Horizontal"><TextBlock  Style="{StaticResource BasicTextBlock-Sketch}" TextWrapping="Wrap" Text="Descriptions" Margin="0,0,150,0" FontSize="24" FontWeight="Bold"/>
    					<ed:RegularPolygon Fill="{StaticResource BaseBackground-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" UseLayoutRounding="False" Width="46" d:LayoutOverrides="VerticalMargin" HorizontalAlignment="Right"/>
    					<ed:RegularPolygon Fill="{StaticResource BaseBackground-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" UseLayoutRounding="False" Width="46" HorizontalAlignment="Right" d:LayoutOverrides="VerticalMargin"/>
    					<ed:RegularPolygon Fill="{StaticResource BaseBackground-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" UseLayoutRounding="False" Width="46" HorizontalAlignment="Right" d:LayoutOverrides="VerticalMargin"/>
    					<ed:RegularPolygon Fill="{StaticResource BaseBackground-Sketch}" ed:GeometryEffect.GeometryEffect="Sketch" InnerRadius="0.47211" PointCount="5" Stretch="Fill" Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" UseLayoutRounding="False" Width="46" HorizontalAlignment="Right" d:LayoutOverrides="VerticalMargin"/>
						
    				</StackPanel>
    				<TextBlock Text="{Binding Description}" Grid.Row="2" Style="{StaticResource BasicTextBlock-Sketch}"/>
    			</Grid>
    		</wp:PivotItem>
    	</wp:Pivot>
    	<mockups:ApplicationBarMockup Grid.Row="1" VerticalAlignment="Stretch">
    		
    		<mockups:ApplicationBarMockup.MenuItemsContent>
    			<StackPanel>
    				<TextBlock Margin="4" Style="{StaticResource PhoneTextTitle3Style-Sketch}" Text="Share"/>
    				<TextBlock Margin="4" Style="{StaticResource PhoneTextTitle3Style-Sketch}" Text="Delete"/>
					<TextBlock Margin="4" Style="{StaticResource PhoneTextTitle3Style-Sketch}" Text="Download"/>
					<TextBlock Margin="4" Style="{StaticResource PhoneTextTitle3Style-Sketch}" Text="Add to favorite"/>
    			</StackPanel>
    		</mockups:ApplicationBarMockup.MenuItemsContent>
    	</mockups:ApplicationBarMockup>
    </Grid>
</mockups:WindowsPhoneChrome>
